<template>
  <!-- 答辩和成绩 -->
  <div>
    <!-- 头部区域 -->
    <div class="head">
      <el-descriptions :column="3" border>
        <el-descriptions-item>
          <template slot="label"> 我的毕业设计课题 </template>
          <router-link to="/mytopic">{{ topic }}</router-link>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 指导老师 </template>
          <router-link
            :to="{ path: '/teacherinfo', query: { id: teacher_id } }"
            >{{ teacher }}</router-link
          >
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 内容区域 -->
    <div class="content_first">
      <el-table :data="tableData_1" border style="width: 100%">
        <el-table-column label="类型" width="300">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.group_style }}</span>
          </template>
        </el-table-column>
        <el-table-column label="答辩小组" width="300">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.group_num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="答辩地点" width="300">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.group_address }}</span>
          </template>
        </el-table-column>
        <el-table-column label="答辩日期">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{
              scope.row.time | formmateDate
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 成绩区域 -->
    <div class="content_second">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="指导教师评阅成绩30%" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">
              <p>成绩： {{ scope.row.article_teacherscore }}</p>
              评语：
              {{ scope.row.teacher_observation }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="评阅教师评阅成绩30%" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">
              <p>成绩： {{ scope.row.look_teacherScore }}</p>
              评语： {{ scope.row.look_teacherObservation }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="答辩成绩40%" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">
              <p>成绩： {{ scope.row.reply_score }}</p>
              评语： {{ scope.row.reply_observation }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="总成绩" width="180">
          <template>
            <span style="margin-left: 10px">
              {{ allScore }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="成绩等级">
          <template>
            <span style="margin-left: 10px">
              {{ gardeScore }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="优秀论文情况">
          <template>
            <span style="margin-left: 10px">
              {{ excellent }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  created() {
    this.getinfo();
    this.get_score();
    this.get_defence();
  },
  data() {
    return {
      topic: "",
      teacher: "",
      tableData_1: [],
      tableData: [],
      teacher_id: "",
    };
  },
  filters: {
    formmateDate(time) {
      return new Date(time).toLocaleString();
    },
  },
  computed: {
    // 总成绩
    allScore: function () {
      if (!this.tableData[0]) {
      } else {
        return (
          this.tableData[0].article_teacherscore * 0.3 +
          this.tableData[0].look_teacherScore * 0.3 +
          this.tableData[0].reply_score * 0.4
        );
      }
    },
    // 分数的等级
    gardeScore: function () {
      if (this.allScore >= 90) return "优";
      if (this.allScore >= 80 && this.allScore < 90) return "良";
      if (this.allScore >= 60 && this.allScore < 80) return "中";
      if (this.allScore < 60) return "不及格";
    },
    excellent: function () {
      if (this.allScore >= 95) return "优秀论文";
      if (this.allScore < 95) return "否";
    },
  },
  methods: {
    getinfo() {
      this.$http.get("http://127.0.0.1:8080/my/getTopic").then((res) => {
        // console.log(res);
        if (res.data.status == 0) {
          this.topic = res.data.data[1][0].topic_name;
          this.teacher = res.data.data[0][0].teacher_name;
          this.teacher_id = res.data.data[0][0].id;
        } else {
          this.topic = "";
          this.teacher = "";
        }
      });
    },
    // 获取个人分数
    get_score() {
      this.$http
        .get("http://127.0.0.1:8080/my/get_score")
        .then((res) => {
          if (res.data.status == 0) {
            console.log(res);
            this.tableData = res.data.data;
          } else {
            this.tableData = [];
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    // 获取答辩小组的组号信息
    get_defence() {
      this.$http
        .get("http://127.0.0.1:8080/my/get_defence")
        .then((res) => {
          // console.log(res);
          if (res.data.status == 0) {
            this.tableData_1 = res.data.data;
          } else {
            // this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.content_first {
  margin: 20px 0;
}
</style>
